<template>
  <div class="bg-white rounded-lg shadow-md p-4 border-l-4"
       :style="{ borderLeftColor: getBorderColor }">
    <div class="flex justify-between items-start">
      <div>
        <p class="text-sm text-gray-500"
           style="font-size:22px;font-weight: bold;">{{ title }}</p>
        <h3 class="text-2xl font-bold text-gray-800 mt-1">{{ value }}</h3>
        <p class="text-xs"
           :class="subValue.startsWith('+') ? 'text-green-500' : 'text-red-500'">
          <!-- 使用映射后的箭头图标组件 -->
          <ArrowUpOutlined class="mr-1" /> {{ subValue }}
        </p>
      </div>

      <div class="p-3 rounded-full"
           :style="{ backgroundColor: getBgColor, color: getTextColor }">
        <!-- 动态渲染图标组件 -->
        <component :is="iconComponent" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import {
  ArrowUpOutlined, // 向上箭头图标
  UserOutlined, // 用户图标
  LoadingOutlined, // 加载图标
  CodeOutlined, // 代码图标（Ant Design Vue官方图标名）
  DatabaseOutlined, // 数据库图标
} from '@ant-design/icons-vue'; // 导入所需图标

const props = defineProps({
  title: { type: String, required: true },
  value: { type: String, required: true },
  subValue: { type: String, default: '' },
  icon: { type: String, required: true }, // 传入图标名称（如 'user'/'loading'等）
  color: { type: String, default: 'blue' },
});

// 图标名称到组件的映射（需与Ant Design Vue官方图标名一致）
const iconMap = {
  user: UserOutlined, // 用户图标
  loading: LoadingOutlined, // 加载图标
  code: CodeOutlined, // 代码图标（注意官方名称为CodeOutlined）
  database: DatabaseOutlined, // 数据库图标
  'arrow-up': ArrowUpOutlined, // 向上箭头图标（用于subValue）
};

// 计算当前图标组件
const iconComponent = computed(() => {
  return iconMap[props.icon] || UserOutlined; // 默认用户图标
});

// 颜色映射逻辑保持不变
const colorMap = {
  blue: { border: '#1677FF', bg: '#E6F3FF', text: '#1677FF' },
  green: { border: '#52C41A', bg: '#F3FCE6', text: '#52C41A' },
  purple: { border: '#722ED1', bg: '#F9F0FF', text: '#722ED1' },
  orange: { border: '#FAAD14', bg: '#FFF7E6', text: '#FAAD14' },
  teal: { border: '#13C2C2', bg: '#E6FCFC', text: '#13C2C2' },
};

const getBorderColor = computed(() => colorMap[props.color]?.border || colorMap.blue.border);
const getBgColor = computed(() => colorMap[props.color]?.bg || colorMap.blue.bg);
const getTextColor = computed(() => colorMap[props.color]?.text || colorMap.blue.text);
</script>

<style scoped>
/* 图标尺寸调整 */
.anticon {
  font-size: 20px; /* 统一图标大小 */
}
</style>